<template>
    <div class="content">
        <UserIndexTop :showfun="hidden"></UserIndexTop>
        <div class="backButton">
            <el-button type="text" @click="$router.go(-3)">返 回</el-button>
        </div>
        <div class="page_content">
            <div class="title">
                <div class="text">授权小程序</div>
                <div class="button">
                    <el-button type="text">小程序授权审核发布指南</el-button>
                </div>
            </div>
            <div class="box_content">
                <div class="box_title">授权小程序后，即可发布小程序</div>
                <div class="box_text">1.微信官方规定：用户必须自己进行小程序注册。然后才可以将小程序授权给任意第三方进行设计和代码管理。</div>
                <div class="box_text">
                    2.微信官方规定：小程序个人开放的服务类目是有严格规定的，内容不在服务类目中的，是审核不通过的。
                    <el-button type="text">查看详情</el-button>
                </div>
                <div class="box_button">
                    <el-button type="primary" @click="saveLink()">我已有小程序，直接授权</el-button>
                    <el-button style="margin-left: 50px">注册小程序账号</el-button>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="showEmpower" @close="showEmpower=false" width="500px">
            <el-form label-width="80px" style="margin-right:20px">
                <el-form-item label="链接地址">
                    <el-input v-model="linkUrl" clearable></el-input>
                </el-form-item>
            </el-form>
            <div style="text-align:center">
                <el-button type="primary" @click="saveLink">保存</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="showQrcode" @close="showQrcode=false" width="300px">
            <div class="code_box">
                <img :src="qrcodeUrl" alt />
            </div>
            <div class="code_button">使用公众平台绑定的管理员个人微信号扫描</div>
        </el-dialog>
    </div>
</template>
<script>
import UserIndexTop from "@/components/IndexCon/userindextop";
import { authUrl, GetEmpower } from "@/api/wx_config";
import store from "@/store/index";
export default {
  components: {
    UserIndexTop
  },
  data() {
    return {
      hidden: false,
      showEmpower: false, // 显示授权窗口
      linkUrl: "", // 二维码链接地址
      showQrcode: false, // 显示二维码
      qrcodeUrl: "", // 二维码url
      appid: "",
      empowered: false,
      token: ''
    };
  },
  mounted() {
    this.appid = this.$route.query.appid;
    this.token = this.$route.query.token;
    console.log(this.appid);
    this.getData();
    // this.linkUrl = "https://cs.58zltc.com/configuration/subScription/home"; //测试
    this.linkUrl = "http://dls.58zltc.com/#/merchant_manage/authorization"; // 正式
    // if (localStorage.getItem('baseStatus') === "test") {
    //   this.linkUrl = "http://cs1.58zltc.com/configuration/subScription/home"; // 测试
    // }
  },
  methods: {
    // 获取状态
    getData() {
      GetEmpower(this.appid).then(res => {
        if (res.code === 200) {
          this.empowered = true;
        }
      });
    },
    // 保存二维码链接
    saveLink() {
      // let token = this.$route.query.token
      localStorage.setItem("token", store.state.user.token);
      localStorage.setItem("app_id", this.appid);
      authUrl(this.appid, this.linkUrl, this.token).then(res => {
        if (res.code == 200) {
          console.log(res.data);
          this.$message({
            type: "success",
            message: res.msg
          });
          // this.showEmpower = false;
          // return false;
          // return
          window.location.href = res.data;
          // GetEmpower(this.appid).then(res=>{
          //   if(res.code == 200){
          //     this.showQrcode = true;
          //     this.qrcodeUrl = res.data.qrcode_url;
          //   }
          // })
          // this.$router.push({path: '/callback', query:{appid:this.appid}})
        } else {
          this.$message({
            type: "error",
            message: res.msg
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.content {
    min-width: 1440px;
    height: 100%;
    overflow: hidden;
    position: relative;
    .page_content {
        width: 1024px;
        min-width: 1024px;
        height: auto;
        margin: 100px auto 0;
        padding: 0 5px;
        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.07);
        .title {
            color: #666;
            border-bottom: 1px solid #999;
            height: 60px;
            line-height: 60px;
            display: flex;
            .text {
                font-size: 18px;
                flex: 1;
                padding-left: 15px;
            }
            .button {
                font-size: 13px;
            }
        }
        .box_content {
            margin-top: 60px;
            padding-bottom: 60px;
            .box_title {
                font-size: 18px;
                color: #333;
                line-height: 70px;
                text-align: center;
            }
            .box_text {
                color: #999;
                padding-left: 100px;
            }
            .box_button {
                margin-top: 40px;
                text-align: center;
            }
        }
    }
    .backButton {
        position: absolute;
        top: 12px;
        right: 20px;
        height: 40px;
        border-radius: 20px;
        border: 1px solid #5b93ff;
        line-height: 40px;
        color: #5b93ff;
        text-align: center;
        width: 80px;
        z-index: 99999;
    }
    .code_box {
        width: 260px;
        height: 260px;
        margin: 0 auto;
        border: 1px solid #333;
        img {
            width: 260px;
            height: 260px;
        }
    }
    .code_button {
        margin-top: 5px;
        line-height: 20px;
        text-align: center;
    }
}
</style>
